<template>
  <div id="time-picker">
    this is a time picker
    <div class="background-cover" :style="{'height':_cover_height+'px'}" @touchmove.prevent>
      <div class="picker-bg">
        <ul class="picker-title">
          <li>取消</li>
          <li class="picker-title-center"></li>
          <li>确定</li>
        </ul>
        <div class="picker-list-box">
          <div class="picker-list-cover">
            <div class="picker-cover-rest"></div>
            <div class="picker-cover-sel"></div>
            <div class="picker-cover-rest"></div>
          </div>
          <ul v-for="(col,i) in columns" :key="'cols_'+i">
            <li>s</li>
            <li>s</li>
            <li>s</li>
            <li>s</li>
            <li>s</li>
            <li>s</li>
            <li>s</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:"timePicker",
  props:[],
  data(){
    return {
      _cover_height:0,
      columns:[1,1,1]
    }
  },
  created(){
    this._cover_height=document.documentElement.clientHeight||window.screen.height;
  }

}
</script>
<style scoped>
/* 蒙层 */
.background-cover{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background-color:rgba(0,0,0,.6);
}
.picker-bg{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:50%;
  display:flex;
  flex-direction: column;
  background-color:#d1d5db;
}
/* 标题 */
.picker-title{
  display:flex;
  margin:.166667rem .333333rem;
  font-size:.291667rem;
  line-height:.416667rem;
}
.picker-list-box{
  flex:1;
  background-color:seagreen;
  position:relative;
  display:flex;
  text-align:center;
}
.picker-title-center{
  margin:0 .166667rem;
  flex:1;
}
/* 选择 */
.picker-list-box>ul{
  flex:1;
  background-color:rebeccapurple;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
}
.picker-list-box>ul>li{
  font-size:.6rem;
}
/* 选择蒙层 */
.picker-list-cover{
  position: absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  display:flex;
  flex-direction: column;
}
.picker-cover-sel{
  background-color:transparent;
  height:.8rem;
  position: relative;
}
.picker-cover-sel::after,.picker-cover-sel::before{
  content:' ';
  position:absolute;
  left:0;
  width:100%;
  height:1px;
  transform: scaleY(.5);
  background-color:red;
}
.picker-cover-sel::after{
  bottom:0;
}
.picker-cover-sel::before{
  top:0;
}
.picker-cover-rest{
  flex:1;
  background-color:rgba(0,0,0,.4);
}
</style>
